import { VxeBasicTable } from '@/components/VxeTable';
import { computed, defineComponent, ref } from 'vue';
import {
  message,
  Descriptions,
  Button,
  DescriptionsItem,
  Card,
  Layout,
  LayoutSider,
  LayoutContent
} from 'ant-design-vue';
import { useConfig } from './config';
import {
  getJobPageList,
  getTimerPageList,
  startAllJob,
  pauseAllJob,
  cancelSleep,
  persistAll,
  startJob,
  pauseJob,
  // startTrigger,
  // pauseTrigger,
  deleteJob
} from '@/api/system/job';
import EditJobDetailModal from './components/EditJobDetailModal';
import type { SysJobDetail } from '@/api/system/job/model';

export default defineComponent({
  name: 'SysTimer',
  setup(props) {
    const {} = computed(() => {
      return { ...props };
    });
    const { TableRef, ToolBtn, Action, options } = useConfig(getJobPageList);

    const EditJobDetailModalRef =
      ref<InstanceType<typeof EditJobDetailModal>>();
    // 当前选中数据
    const current = ref<SysJobDetail>();
    const showEditJobDetail = ref(false);
    function handleEdit(record: SysJobDetail) {
      EditJobDetailModalRef.value?.openModal();
      current.value = record;
      showEditJobDetail.value = true;
    }
    async function handleDelete(record: { id: any }) {
      deleteJob(record.id)
        .then((res) => {
          message.success(res);
          reload();
        })
        .catch((error) => {
          message.error(error);
        });
    }

    const reload = () => {
      TableRef.value?.commitProxy('query');
    };
    return () => {
      return (
        <Layout style={{ height: '100%' }}>
          <LayoutContent>
            <VxeBasicTable ref={TableRef} {...options}>
              {{
                toolbar_buttons() {
                  return [
                    <ToolBtn
                      filter-call={() => {}}
                      create-call={handleEdit}
                      delete-call={() => {}}
                      show-export={false}
                      show-import={false}
                      show-delete={false}
                      showFilter={false}
                    />
                  ];
                },
                action({ row }) {
                  return [
                    <Action
                      record={row}
                      onEdit={handleEdit}
                      onDelete={handleDelete}
                    />
                  ];
                }
              }}
            </VxeBasicTable>
            <EditJobDetailModal
              ref={EditJobDetailModalRef}
              data={current.value}
              // onDone={reload}
            />
          </LayoutContent>
        </Layout>
      );
    };
  }
});
